<template>
     <n-divider>component 组件交互</n-divider>
     <div class="flex-b">
          <div>
              父组件, {{count}}
              <n-input v-model:value="childrenName" placeholder="请输入给自组件命名"></n-input>
          </div>
          <n-divider style="width:200px"  >分割线</n-divider>
          <div>
               <Children :name="childrenName" @click="clickThis"></Children>
          </div>
     </div>
</template>
    
<script setup lang='ts'>
import { ref } from "@vue/reactivity";
import Children from './Children.vue'
const childrenName = ref();
const count = ref(0)
const clickThis = (str:string)=>{
     console.log(str)
     count.value++;
}
</script>
    
<style scoped>
.flex-b{
     display: flex;
     justify-content: center;
}
</style>